<template>
   <!-- 搜索区域 -->
   <div class="page-box">
      <div>客户对账单</div>
      <div class="page-search">
         <div
            class="search-box"
            style="height: 40px"
         >
            <el-input
               v-model="search"
               placeholder="订单类型/出库单/采购退货单"
               style="width: 270px; margin-right: 10px"
               suffix-icon="search"
            />
            <el-select
               v-model="search"
               placeholder="供应商"
               style="width: 270px; margin-right: 10px"
            >
               <el-option
                  v-for="item in 5"
                  :key="item"
                  :label="item"
                  :value="item"
               />
            </el-select>
            <div>
               <el-date-picker
                  v-model="dateRange"
                  style="width: 250px"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
               />
            </div>
            <div style="margin-left: 20px">
               <el-button
                  color="#6860FF"
                  @click=""
                  >检索</el-button
               >
               <el-button @click="">重置</el-button>
            </div>
         </div>
      </div>
   </div>

   <!-- 表格区域 -->
   <div class="table-box">
      <el-table
         :data="tabeData"
         style="width: 100%"
         v-loading="loading"
         border
         :span-method="handleSpanMethod"
      >
         <el-table-column
            align="center"
            prop="orderType"
            label="订单类型"
            width="100"
         />
         <el-table-column
            align="center"
            prop="orderNo"
            label="出库单/出库退货单"
            width="180"
         />
         <el-table-column
            align="center"
            prop="date"
            label="出库/出库退货日期"
            width="180"
         />
         <el-table-column
            align="center"
            prop="productName"
            label="产品名称"
            width="240"
         />
         <el-table-column
            align="center"
            prop="productCode"
            label="产品编号"
            width="240"
         />
         <el-table-column
            align="center"
            prop="spec"
            label="规格型号"
            width="120"
         />
         <el-table-column
            align="center"
            prop="unit"
            label="单位"
            width="auto"
         />
         <el-table-column
            align="center"
            prop="quantity"
            label="出库/出库退货数量"
            width="180"
         />
         <el-table-column
            align="center"
            prop="price"
            label="单价"
            width="auto"
         >
            <template #default="scope">
               {{ scope.row.price.toFixed(2) }}
            </template>
         </el-table-column>
         <el-table-column
            align="center"
            prop="discount"
            label="折扣"
            width="auto"
         />
         <el-table-column
            align="center"
            prop="orderDiscount"
            label="整单折扣"
            width="120"
         />
         <el-table-column
            align="center"
            prop="total"
            label="总金额"
            width="auto"
         >
            <template #default="scope">
               {{ scope.row.total.toFixed(2) }}
            </template>
         </el-table-column>
         <el-table-column
            align="center"
            prop="paidAmount"
            label="已收/已付金额(元)"
            width="180"
         >
            <template #default="scope">
               {{ scope.row.paidAmount.toFixed(2) }}
            </template>
         </el-table-column>
         <el-table-column
            align="center"
            prop="unpaidAmount"
            label="待收/待付金额(元)"
            width="180"
         >
            <template #default="scope">
               {{ scope.row.unpaidAmount.toFixed(2) }}
            </template>
         </el-table-column>
      </el-table>
   </div>
   <!-- 分页 -->
   <Pagination
      class="pagination"
      @pageSize="pageSize"
      @getPage="getPage"
      :page="pageData.page"
      :page-size="pageData.pageSize"
      :total="total"
   />
</template>
<script setup>
   import "swiper/css";
   import { ref, onMounted, nextTick, watch } from "vue";
   import api from "@/api/index.js";
   import CountTo from "../components/CountTo.vue";

   // 自定义指令：元素进入视口时添加动画
   const vAnimateOnScroll = {
      mounted: (el) => {
         const observer = new IntersectionObserver(
            (entries) => {
               entries.forEach((entry) => {
                  if (entry.isIntersecting) {
                     el.classList.add("animate-in");
                     observer.unobserve(el);
                  }
               });
            },
            { threshold: 0.1 }
         );
         observer.observe(el);
      },
   };
   // 页面数据
   const search = ref("");
   const dialogRef = ref(null);
   const dateRange = ref([]);
   const pageData = ref({
      pageSize: 10,
      page: 1,
      house_type: "",
      category: "",
      keywords: "",
   });
   const total = ref(0);
   const tabeData = ref([]);
   const loading = ref(false);

   // 模拟数据
   const mockData = [
      {
         orderType: "出库",
         orderNo: "CG240212001",
         date: "2022-06-02",
         products: [
            {
               name: "华为笔记本电脑",
               code: "HWPC0001",
               spec: "MateBook 15 D",
               unit: "个",
               quantity: 100,
               price: 5500.0,
               discount: "--",
               orderDiscount: "--",
               total: 550000.0,
            },
            {
               name: "罗技鼠标",
               code: "LGSB00012",
               spec: "g520",
               unit: "个",
               quantity: 100,
               price: 799.0,
               discount: "--",
               orderDiscount: "--",
               total: 79900.0,
            },
            {
               name: "雷蛇键盘",
               code: "LSJP00006",
               spec: "猎魂光V3专业版",
               unit: "个",
               quantity: 100,
               price: 1399.0,
               discount: "--",
               orderDiscount: "--",
               total: 139900.0,
            },
            {
               name: "小米手机14 Ultra",
               code: "XMSJ100211",
               spec: "12GB+256GB 黑",
               unit: "个",
               quantity: 100,
               price: 2499.0,
               discount: "--",
               orderDiscount: "--",
               total: 249900.0,
            },
         ],
         paidAmount: 549000.0,
         unpaidAmount: 19900.0,
      },
      {
         orderType: "出库退货单",
         orderNo: "CGTH240212002",
         date: "2022-05-21",
         products: [
            {
               name: "罗技鼠标",
               code: "LGSB00012",
               spec: "g520",
               unit: "个",
               quantity: 10,
               price: 799.0,
               discount: "--",
               orderDiscount: "--",
               total: 7990.0,
            },
            {
               name: "雷蛇键盘",
               code: "LSJP00006",
               spec: "猎魂光V3专业版",
               unit: "个",
               quantity: 10,
               price: 1399.0,
               discount: "--",
               orderDiscount: "--",
               total: 13990.0,
            },
         ],
         paidAmount: 14900.0,
         unpaidAmount: 9900.0,
      },
      {
         orderType: "出库退货单",
         orderNo: "6151563",
         date: "2022-05-21",
         products: [
            {
               name: "罗技鼠标",
               code: "LGSB00012",
               spec: "g520",
               unit: "个",
               quantity: 10,
               price: 799.0,
               discount: "--",
               orderDiscount: "--",
               total: 7990.0,
            },
            {
               name: "雷蛇键盘",
               code: "LSJP00006",
               spec: "猎魂光V3专业版",
               unit: "个",
               quantity: 10,
               price: 1399.0,
               discount: "--",
               orderDiscount: "--",
               total: 13990.0,
            },
         ],
         paidAmount: 14900.0,
         unpaidAmount: 9900.0,
      },
   ];

   // 处理表格合并
   const handleSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
      if (columnIndex < 3 || columnIndex > 10) {
         // 获取当前行的订单号
         const orderNo = row.orderNo;

         // 找到当前订单号在数据中的第一个索引
         const firstIndex = tabeData.value.findIndex((item) => item.orderNo === orderNo);

         // 计算当前订单号的商品数量
         const count = tabeData.value.filter((item) => item.orderNo === orderNo).length;

         // 如果是订单的第一行，则合并单元格
         if (rowIndex === firstIndex) {
            return {
               rowspan: count,
               colspan: 1,
            };
         } else {
            return {
               rowspan: 0,
               colspan: 0,
            };
         }
      }
   };

   // 修改处理表格数据的方法
   const processTableData = () => {
      const result = [];
      mockData.forEach((order) => {
         order.products.forEach((product, index) => {
            result.push({
               orderType: order.orderType,
               orderNo: order.orderNo,
               date: order.date,
               productName: product.name,
               productCode: product.code,
               spec: product.spec,
               unit: product.unit,
               quantity: product.quantity,
               price: product.price,
               discount: product.discount,
               orderDiscount: product.orderDiscount,
               total: product.total,
               // 只在第一个产品显示订单级别的金额
               paidAmount: index === 0 ? order.paidAmount : null,
               unpaidAmount: index === 0 ? order.unpaidAmount : null,
            });
         });
      });
      return result;
   };

   // 获取表格数据
   const getAlltabeData = async () => {
      loading.value = true;
      try {
         // 模拟API调用延迟
         await new Promise((resolve) => setTimeout(resolve, 500));
         const processedData = processTableData();
         tabeData.value = processedData;
         total.value = processedData.length;
      } catch (error) {
         console.error("获取数据失败:", error);
      } finally {
         loading.value = false;
      }
   };

   // 监听分页变化
   watch(
      () => pageData.value,
      () => {
         getAlltabeData();
      },
      { deep: true }
   );

   // 分页方法
   const pageSize = (e) => {
      pageData.value.pageSize = e;
   };

   const getPage = (e) => {
      pageData.value.page = e;
   };

   // 生命周期钩子
   onMounted(() => {
      getAlltabeData();
      document.querySelector(".platform-home")?.classList.add("page-loaded");
   });
</script>

<style scoped lang="scss">
   .platform-home {
      width: 100%;
      height: 100%;
      font-family: 黑体;
      letter-spacing: 2px;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.3s ease, transform 0.3s ease;

      &.page-loaded {
         opacity: 1;
         transform: translateY(0);
      }

      &_header {
         &_right {
            color: #a1a1a1;
         }
      }

      &_content {
         width: 100%;
         height: 100%;
         border: 1px solid blue;
      }
   }

   // 仪表盘卡片样式
   .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-gap: 14px;
      margin: 0 auto;
   }

   .dashboard-card {
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
      border: 1px solid #f0f0f0;
      padding: 14px 20px 14px 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 90px;
      transition: box-shadow 0.2s;
      position: relative;
      opacity: 0;
      transform: translateY(20px);

      &:not(.header-card):hover {
         box-shadow: 0 4px 24px 0 rgba(64, 158, 255, 0.12);
      }
   }

   .card-header {
      display: flex;
      // justify-content: space-around;
      align-items: center;
      margin-bottom: 12px;
   }

   .card-title {
      font-size: 15px;
      color: #666;
      font-weight: 500;
   }

   .card-icon {
      position: absolute;
      right: 14px;
      top: 20px;
      width: 74px;
      height: 74px;
      background: #6860ff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .card-main {
      display: flex;
      align-items: baseline;
      justify-content: flex-start;
      gap: 10px;
      // transform: translateX(79px);
      width: 50%;
      margin-bottom: 13px;
   }

   .card-value {
      font-size: 2rem;
      font-weight: bold;
      color: #222;
   }

   .card-change {
      font-size: 1rem;
      margin-left: 6px;
      position: absolute;
      bottom: 7px;
      right: -62px;

      &.up {
         color: #1ecb8c;
      }

      &.down {
         color: #f56c6c;
      }
   }

   // 动画效果
   @keyframes fadeInUp {
      from {
         opacity: 0;
         transform: translateY(20px);
      }
      to {
         opacity: 1;
         transform: translateY(0);
      }
   }

   @keyframes scaleIn {
      from {
         transform: scale(0.95);
         opacity: 0;
      }
      to {
         transform: scale(1);
         opacity: 1;
      }
   }

   // 应用动画
   .animate-in {
      animation: fadeInUp 0.3s forwards;
      @for $i from 1 through 5 {
         &:nth-child(#{$i}) {
            animation-delay: #{$i * 0.05}s;
         }
      }
   }

   // 表格和分页样式
   .btn-box {
      display: flex;
      align-items: center;
      justify-content: center;
   }

   ::v-deep .el-input__wrapper {
      background-color: rgba(250, 252, 251, 1);
   }

   ::v-deep .el-table {
      --el-table-header-bg-color: rgba(235, 236, 240, 1);
      thead {
         color: #444;
      }
   }

   .pagination {
      width: calc(100% - 250px);
      position: fixed;
      right: 20px;
      padding-top: 10px;
      border-top: 1px solid #98989848;
   }

   // Element Plus 组件样式覆盖
   :deep {
      .el-pagination.is-background .el-pager li.is-active {
         background-color: #000 !important;
      }

      .el-checkbox__input {
         &.is-checked .el-checkbox__inner,
         &.is-indeterminate .el-checkbox__inner {
            background-color: #6860ff;
            border-color: #6860ff;
         }
      }

      .el-checkbox__inner:hover {
         border-color: #626aef !important;
      }

      .el-button:hover {
         background-color: #e2e4fd;
         color: #6860ff;
      }

      .el-input__wrapper:hover {
         box-shadow: inset 0 0 0 1px #6860ff;
      }
   }

   .deepPurple {
      color: #7a60fe;
      margin-left: 10px;
   }

   .amount-statistics {
      display: flex;
      justify-content: start;
      align-items: center;
      padding: 10px 20px;
      background-color: #f2f2f2;
      margin-top: 20px;
      border-radius: 5px;

      &-item {
         display: flex;
         align-items: center;
         justify-content: center;
         margin-right: 20px;
      }
   }
</style>
